import Layout from 'lib/components/layout'
import { Note, Code, Spacer, Link } from 'components'

export const meta = {
  title: '主题',
  group: '定制化',
}

## 主题

**Geist UI** 现在支持多种主题，并能以简单易用的方式随意切换或是创建新的主题，不需要任何配置与第三方库。

作为基础的选项，Geist UI 内置了两种可用的基础主题，`light` 和 `dark` (亮色和暗色)。

<Spacer y={2} />

### 切换主题

<Note>
  在使用任何组件前，请确保已添加 <Code>GeistProvider</Code> 至应用的根节点。
</Note>
<Spacer y={0.5} />
<Note type="success">
  <Code>CssBaseline</Code> 提供了基础的 CSS 样式，这和你熟悉的 <Code>normalize</Code>{' '}
  有些类似。
</Note>
<Spacer y={1} />

**你可以参考如下步骤切换主题：**

1. 确保 `GeistProvider` 与 `CssBaseline` 已经添加至根节点。

2. 更新 `themeType` 的值，所有的组件都会随之自动变化。

```jsx
import { CssBaseline, GeistProvider } from '@geist-ui/react'

const App = () => {
  const [themeType, setThemeType] = useState('light')
  const switchThemes = () => {
    setThemeType(last => (last === 'dark' ? 'light' : 'dark'))
  }
  return (
    <GeistProvider themeType={themeType}>
      <CssBaseline />
      <YourComponent onClick={switchThemes} />
    </GeistProvider>
  )
}
```

<Spacer y={3} />

### 自定义主题

自定义主题样式在 Geist UI 中非常简单，你只需要提供一个新的样式对象给 `GeistProvider`，所有的组件都会自然变化以适应你自定义的属性。
这里有 <Link target="_blank" color href="https://github.com/geist-org/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。

当然，如果一个组件未使用到你自定义的变量，它不会有任何变化也不会重新渲染。

<Spacer y={1} />
<Note type="warning">
  自定义越多的主题，就会有越多的 <b>重新渲染</b> 发生。
</Note>

```jsx
import { CssBaseline, GeistProvider, Themes } from '@geist-ui/react'

const myTheme1 = Themes.createFromLight({
  type: 'coolTheme',
  palette: {
    success: '#000',
  },
})

const App = () => (
  <GeistProvider themes={[myTheme1]} themeType="coolTheme">
    <CssBaseline />
    <YourAppComponent onClick={switchThemes} />
  </GeistProvider>
)
```

方法 `Themes.createFromLight` 允许你在 `light` (亮色主题) 的基础上继承与创建一份新的主题，
当然，你可以以 `dark` (暗色主题) 为基准创建主题：`Themes.createFromDark`，或是以你自己的、来自社区的主题为基础：

```jsx
const myBaseTheme = { ... }
const myTheme2 = Themes.create(myBaseTheme, {
  type: 'myTheme2',
  palette: {
    success: '#000',
  },
})
```

<Spacer y={3} />

### 查看主题定义的所有类型

如果你正在使用 TypeScript，可以选择引入各类预置的类型：

```ts
import {
  GeistUIThemes,
  GeistUIThemesFont,
  GeistUIThemesPalette,
  GeistUIThemesExpressiveness,
  GeistUIThemesLayout,
} from '@geist-ui/react'

// 使用示例
const myStyles: GeistUIThemes = {
  /* ... */
}
const myPalette: Partial<GeistUIThemesPalette> = {
  /* ... */
}
```

如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" href="https://github.com/geist-org/react/blob/master/components/themes/presets/index.ts">这里的类型声明文件</Link>。

<Spacer y={3} />

### 定制化组件

#### 通过 `className` 重写样式

你可以通过组件上的 `className` 属性重写当前组件的样式。

```jsx
import { Button, Row } from '@geist-ui/react'

const MyPage = () => (
  <Row>
    <Button className="page-button">Click me!</Button>
  </Row>
)

// in css file:
.page-button {
  padding: 0;
}
```

<Spacer y={2} />

#### 通过行内样式覆盖样式

任何 `inline-style` (行内样式) 都可以在所有组件上正常的工作。

```jsx
const MyPage = () => (
  <Row>
    <Button style={{ margin: '20px' }}>Click me!</Button>
  </Row>
)
```

<Spacer y={2} />

#### 使用预置主题构建自己的组件

有时候你想要创建一些适用于自己的组件，但你想要跟随整个组件库的主体风格或明暗变化。
现在你可以使用 **主题变量** 来完成这件事。

```jsx
import { useTheme } from '@geist-ui/react'

const MyComponent = () => {
  const theme = useTheme()
  return (
    <div style={{ color: theme.palette.success }}>
      <span>hello world!</span>
    </div>
  )
}
```

<Spacer y={2} />

#### Themes APIs

`Themes` 包含了一些静态方法 (纯函数)，这在你自定义主题时会很有用：

- `Themes.create` - 创建一个新主题。
- `Themes.createFromDark` - 以暗色模式为基础创建新主题。
- `Themes.createFromLight` - 以亮色模式为基础创建新主题。
- `Themes.isPresetTheme` - 检查一个主题对象是否来自 Geist UI。
- `Themes.isAvailableThemeType` - 检查一个主题名是否可用。(是否重复)
- `Themes.hasUserCustomTheme` - 检查一组主题中是否包含自定义的主题。
- `Themes.getPresets` - 获取一组由 Geist UI 内置的默认主题。
- `Themes.getPresetStaticTheme` - 获取一个由 Geist UI 内置的默认主题 (默认加载的)。

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
